<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="fragment :: header('图片上传')" />
    <style>
        .upload_warp_img_div_del {
            position: absolute;
            top: 6px;
            width: 16px;
            right: 4px;
            cursor: pointer;
        }

        .upload_warp_img_div_preview {
            position: absolute;
            top: 6px;
            width: 16px;
            left: 4px;
            cursor: pointer;
        }

        .upload_warp_img_div_top {
            position: absolute;
            top: 0;
            width: 100%;
            height: 30px;
            background-color: rgba(0, 0, 0, 0.4);
            line-height: 30px;
            text-align: left;
            color: #fff;
            font-size: 12px;
            text-indent: 4px;
        }

        .upload_warp_img_div_text {
            white-space: nowrap;
            width: 80%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .upload_warp_img_div img {
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
        }

        .upload_warp_img_div {
            position: relative;
            height: 100px;
            width: 120px;
            border: 1px solid #ccc;
            margin: 0 30px 10px 0;
            float: left;
            line-height: 100px;
            display: table-cell;
            text-align: center;
            background-color: #eee;
            cursor: move;
        }

        .upload_warp_img {
            border-top: 1px solid #D2D2D2;
            padding: 14px 0 0 14px;
            overflow: hidden
        }

        .upload_warp_text {
            text-align: left;
            margin-bottom: 10px;
            padding-top: 10px;
            text-indent: 14px;
            border-top: 1px solid #ccc;
            font-size: 14px;
        }

        .upload_warp_right {
            float: left;
            width: 57%;
            margin-left: 2%;
            height: 100%;
            border: 1px dashed #999;
            border-radius: 4px;
            line-height: 130px;
            color: #999;
        }

        .upload_warp_left img {
            margin-top: 32px;
        }

        .upload_warp_left {
            float: left;
            width: 15%;
            height: 30px;
            border: 1px solid #999;
            border-radius: 4px;
            cursor: pointer;
            line-height: 30px;
            color: #FFF;
            background-color: #0b700e;
        }

        .upload_warp {
            margin: 14px;
            height: 30px;
        }

        .upload {
            border: 1px solid #ccc;
            background-color: #fff;
            box-shadow: 0 1px 0 #ccc;
            border-radius: 4px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">上传图片</label>
            <div class="layui-input-block">
                <div class="upload">
                    <div class="upload_warp">
                        <button type="button" class="layui-btn" id="test1">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                    </div>
                    <div class="upload_warp_text">
                        共<span id="countFileList"></span>张图片（可同时上传多张，拖动图片可以调整位置）
                    </div>
                    <div class="upload_warp_img" id="upload_warp_file" >
                        <draggable list="fileList" options="{animation: 300,handle:'.dragDiv'}">
                            <transition-group name="fileList" id="imgHtml">
                            </transition-group>
                        </draggable>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
    <div id="previewLayer" style="display: none;padding:10px;">
        <img src="" id="previewImg" style="max-width: 100%;">
    </div>
    <th:block th:include="fragment :: footer" />
    <script>
        var fileList = [];
        layui.use('upload', function(){
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,multiple: true  //批量上传
                ,url: ctx + '/common/ajaxMultiImageUpload' //上传接口
                ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(); //上传loading
                }
                ,done: function(res){
                    layer.closeAll('loading'); //关闭loading

                    //上传完毕回调
                    console.log(res)

                    if (res && res.code == 0) {
                        layer.msg('上传成功');
                        var imgUrls = res.imgUrls;
                        if (imgUrls && imgUrls.length > 0) {
                            for (var i = 0; i < imgUrls.length; i++) {
                                if (imgUrls[i] && imgUrls[i] != "") {
                                    fileList.push(imgUrls[i])
                                }
                            }
                        }

                        refreshImgHtml();
                    } else {
                        if (res.msg) {
                            layer.msg(res.msg);
                        } else {
                            layer.msg('上传失败');
                        }
                    }

                }
                ,error: function(){
                    layer.closeAll('loading'); //关闭loading
                    //请求异常回调
                    layer.msg('出错了');
                }
            });
        });

        $(function (){
            //拖拽排序
            // var list = document.getElementById("imgHtml");
            // new Sortable(list, {
            //     animation: 150,
            //     // 结束拖拽
            //     onEnd: function (evt) {
            //         refreshFileList();
            //     },
            // });

            $("#imgHtml").sortable({
                stop: function(event, ui) {
                    //保存排序
                    refreshFileList();
                }
            });

            $("#submitBtn").click(function () {
                refreshFileList();
                layer.alert("要提交的图片列表：" + JSON.stringify(fileList))
            })
        })

        /** 刷新数据 */
        function refreshFileList(){
            fileList = [];
            $(".uploaded_img").each(function(){
                fileList.push($(this).prop("id"))
            })
        }

        /** 删除轮播图片 */
        function fileDel(obj){
            layer.confirm('是否确认删除？', {
                btn: ['确认','取消'] //按钮
            }, function(index){
                $(obj).parent().parent().remove();
                refreshFileList();
                layer.close(index);
            }, function(index){
                layer.close(index);
            });


        }

        /** 预览轮播图片 */
        function preview(url){
            $('#previewImg').attr('src', url);
            layer.open({
                type: 1,
                offset: '50px',
                skin: 'layui-layer-molv',
                title: "图片预览",
                area: ['650px', '450px'],
                shade: 0,
                shadeClose: true,
                content: jQuery("#previewLayer"),
                cancel: function(index, layero){
                    jQuery("#previewLayer").hide()
                }
            });
        }

        /** 显示图片列表 */
        function refreshImgHtml(){
            var classStyleImgHtml = "";
            if(fileList.length>0){
                $("#countFileList").text(fileList.length);
                for (var i=0;i<fileList.length;i++){
                    classStyleImgHtml = classStyleImgHtml + '<div class="upload_warp_img_div dragDiv"><div class="upload_warp_img_div_top">' +
                        '<img src="' + ctx + '/images/preview.png" class="upload_warp_img_div_preview" onclick="preview(\''+ctx + fileList[i]+'\')">' +
                        '<img src="' + ctx + '/images/del.png" class="upload_warp_img_div_del" onclick="fileDel(this)"></div>' +
                        '<img src="'+ ctx + fileList[i]+'" id="'+fileList[i]+'" class="uploaded_img"></div>';
                }
            }
            $("#imgHtml").html(classStyleImgHtml);
        }
    </script>
</body>
</html>